<template>
  <div class="dynamic-item" @click="proxy.$utils.toLink(`/packagePages/dynamic/listDetails?id=${item.id}`)">
    <view class="user flex alignCenter">
      <view @click.stop="toUserDetails(item.userId)">
        <uv-avatar :src="item.avatar" size="33" mode="aspectFill"></uv-avatar>
      </view>
      <view class="info">
        <view class="bold fz14 nickname">{{item.nickname}}</view>
        <view class="desc fz12">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
      </view>
    </view>

    <view class="intro fz14">
      <uv-parse :content="replaceIfMatch(item.textContent,item.movementJsons,'#429CEE')"></uv-parse>
    </view>

    <view class="imgs">
      <showImages v-model="item.imageContent"></showImages>
    </view>

    <view class="topicDiv" v-if="item.topic && item.topic.id" @click.stop="proxy.$utils.toLink(`/packagePages/topic/topicDetails?id=${item.topic.id}`)">
      <view class="text">#{{item.topic.topicName}}</view>
    </view>

    <view class="comment" v-if="item.commentsList&&item.commentsList.length">
      <view class="text fz14 flex" v-for="(comment,idx) in item.commentsList.slice(0, 2)" :key="idx">
        <text class="bold shrink">{{comment.nickname}}：</text>
        <text class="commentContent" :style="commentContentStyle(comment.nickname)">{{comment.content}}</text>
      </view>
      <view class="seeMore" v-if="item.commentsList.length>2">查看全部评论</view>
    </view>

    <view class="map flex alignCenter fz12" v-if="item.address">
      <uv-icon name="map" color="#707070"></uv-icon>
      <text>{{item.address}}</text>
    </view>

    <view class="actionLine flex alignCenter justifyBetween">
      <view class="flex alignCenter">
        <view class="like flex alignCenter fz14" @click.stop="likeFunc(item,index)">
          <uv-icon color="#707070" name="heart" v-if="item.hasLiked==0" size="20"></uv-icon>
          <uv-icon name="heart-fill" color="#E59840" v-else size="20"></uv-icon>
          <text v-if="item.likeCount" class="fz14" style="color:#E59840">{{item.likeCount}}</text>
        </view>

        <view class="flex alignCenter comment">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/29/17302171582193094.png" width="20px" height="20px"></uv-image>
          <text v-if="item.commentCount">{{item.commentCount}}</text>
        </view>

        <view class="comment">
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/29/17302175974797503.png" width="13px" height="13px"></uv-image>
        </view>
      </view>

      <view style="width: 30px;" class="more">
        <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/30/17302177309193250.png" mode="widthFix" />
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
import showImages from "@/components/main/showImages.vue";
let props = defineProps(["item", "index"]);

let item = computed(() => {
  return props.item;
});

async function toUserDetails(id) {
  await proxy.$apis.addVisitor({ friendId: id, form: 2 });
  proxy.$utils.toLink(`/packagePages/user/details?id=${id}`);
}

function replaceIfMatch(inputString, friends, colorValue) {
  // 正则表达式匹配 @$与$ 之间的字符串
  const regex = /\@\$([0-9]+)\$/g;
  // 使用 replace 方法进行替换
  const resultString = inputString.replace(regex, (match, friendId) => {
    // 找到对应的 friendId
    const friend = friends.find((f) => f.friendId == Number(friendId));
    // 如果找到了对应的好友，替换成带色值的 @nikeName；否则不做替换
    return friend
      ? `<span style="color: ${colorValue};">@${friend.nikeName}</span>`
      : match;
  });
  return resultString;
}

//点赞
async function likeFunc(item, index) {
  await counter.toLike(item.hasLiked, item.id, 1);
  if (item.hasLiked) {
    props.item.hasLiked = 0;
    props.item.likeCount--;
    proxy.$utils.showToast("取消点赞成功");
  } else {
    props.item.hasLiked = 1;
    props.item.likeCount++;
    proxy.$utils.showToast("点赞成功");
  }
}
</script>



<style lang="scss" scoped>
.info {
  margin-left: 10px;
}
.nickname {
  color: #3c69b4;
}
.desc {
  color: #d3d3d3;
  margin-top: 3px;
}
.intro {
  color: #2d2d2d;
  margin: 15px 0 10px;
}
.map {
  margin: 10px 0;
  text {
    margin-left: 3px;
    color: #707070;
  }
}
.topicDiv {
  font-size: 14px;
  background-color: #f1f7ff;
  color: #429cee;
  padding: 5px 15px;
  border-radius: 15px;
  display: inline-block;
}
.actionLine {
  .like {
    width: 50px;
    text {
      margin-left: 3px;
    }
  }
  .comment {
    margin-left: 30px;
    width: 50px;
  }
  .more {
    display: blok;
    width: 100%;
  }
}
</style>
